<template>
  <div>
    <div class="icon">
      <i class="el-icon-reading"></i>
      选修课程
    </div>
    <div class="tables">
      <el-row>
        <el-col :span="8" :offset="15">
          <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item>
              <el-input class="input" v-model="formInline.courseName" placeholder="课程名"></el-input>
            </el-form-item>
            <el-form-item>
              <el-input class="input" v-model="formInline.teacherName" placeholder="学员名"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-pagination
            background
            layout="prev, pager, next"
            @current-change="handleCurrentChange"
            :current-page.sync="formInline.index"
            :page-size="8"
            :total="total">
          </el-pagination>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-table
            :data="tableData"
            stripe
            style="width: 100%">
            <el-table-column
              prop="scId"
              label="课程ld"
              width="180">
            </el-table-column>
            <el-table-column
              prop="courseName"
              label="课程名"
              width="180">
            </el-table-column>
            <el-table-column
              prop="studentName"
              label="学生名">
            </el-table-column>
            <el-table-column
              prop="scDailyScore"
              label="日常分">
            </el-table-column>
            <el-table-column
              prop="scExamScore"
              label="考试分">
            </el-table-column>
            <el-table-column
              prop="scScore"
              label="总分">
            </el-table-column>

            <el-table-column label="操作">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  type="success"
                  @click="handleEdit(scope.$index, scope.row)">打分
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </div>

    <el-dialog
      title="打分"
      :visible.sync="dialogVisible"
      width="30%">
      <!-- 表达位置 -->
      <el-row type="flex" justify="center">
        <el-col :span="12">
          <el-form ref="form" :model="scoreForm"  :rules="rules" label-width="80px">
            <el-form-item label="平时分" prop="scDailyScore" >
              <el-input class="input" type="number" v-model="scoreForm.scDailyScore" placeholder="平时分"
                        @change="countScore"></el-input>
            </el-form-item>
            <el-form-item label="考试分" prop="scExamScore">
              <el-input class="input" type="number" v-model="scoreForm.scExamScore" placeholder="考试分"
                        @change="countScore"></el-input>
            </el-form-item>
            <el-form-item label="总分">
              <el-input class="input" readonly v-model="scoreForm.scScore" placeholder="总分"></el-input>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addScore">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import {get, post} from "../../../common/request";

  export default {
    name: "ChoseCourse",
    data() {
      var checkScore = (rule, value, callback) => {
        // console.log(rule)
        console.log(value)
        // console.log(callback)
        if (!value) {
          return callback(new Error('分数不能为空'));
        }
        setTimeout(() => {
          if (isNaN(value)) {
            callback(new Error('请输入数字值'));
          } else {
            if (value > 100 || value < 0) {
              callback(new Error('分数只能在1~100之间'));
            } else {
              callback();
            }
          }
        }, 1000);
      };
      return {
        scoreForm: {
          scDailyScore: 0,
          scExamScore: 0,
          scScore: 0,
          scId:-1
        },
        formInline: {
          courseName: '',
          teacherName: '',
          index: 1
        },
        tableData: [],
        total: 10,
        dialogVisible: false,
        rules: {
          scDailyScore: [
            {type: "number", validator: checkScore, trigger: 'blur'}
          ],
          scExamScore: [
            {type: "number", validator: checkScore, trigger: 'blur'}
          ],
        }
      }
    },
    methods: {
      countScore() {
        var a = parseInt(this.scoreForm.scDailyScore);
        var b = parseInt(this.scoreForm.scExamScore);
        if ((a >= 0 && a <= 100) && (b >= 0 && b <= 100)) {
          this.scoreForm.scScore = parseInt(((a + b) / 2.0));
        }
      },
      addScore(){
        //发送请求修改
        post("/rc-teacher/addScore",this.scoreForm).then(x => {
          console.log(x)
          if (x.code == 1) {
            this.$message.success(x.msg);
            this.getData();
          } else {
            this.$message.error(x.msg);
          }
        })
        // 关闭弹出框
        this.dialogVisible = false
      },
      handleEdit(index, row) {
        console.log(row);
        this.dialogVisible = true;
        // 当打开模块框时,设置 要提交服务器数据的主键,方便后台进行操作
        this.scoreForm.scId=row.scId;
      },
      onSubmit() {
        console.log('submit!');
        this.getData();
      },
      handleCurrentChange(val) {
        console.log(val)
        this.getData();
      },
      getData() {
        get("/rc-teacher/searchStudentScore", this.formInline).then(x => {
          // 设置当前页码
          this.formInline.index = x.data.pageNum;
          // 设置总页数
          this.total = x.data.total;
          // 数据表格
          this.tableData = x.data.list;
          console.log(this.formInline.index)
          console.log(this.total)
          console.log(this.tableData)
        })
      }
    },
    mounted() {
      this.getData();
    }
  }
</script>


<style scoped>
  .icon {
    color: dimgray;
    line-height: 20px;
    text-align: left;
  }

  .tables {
    background-color: white;
    border-radius: 5px;
    border: 1px solid lightgrey;
    margin-top: 10px;
    padding: 10px 30px 10px 30px;
  }

  .input {
    width: 180px;
  }
</style>
